<!--笔记分为我的，全部，根据科目获取-->
<script setup>
import {useRoute} from 'vue-router'
import NoteApis from '@/apis/note.js'
import useUserStore from '@/stores/user.js'
import OneQuestion from "@/components/common/OneQuestion.vue";
import {ElMessage} from "element-plus";
// url携带categoryId
const route = useRoute()
const types = ['全部', '我的']
const activeIndex = ref(0)
const userStore = useUserStore()
const draw = ref(false)
const noteType = ref(null)
const currentQuestion = ref(null)
const noteListData = ref({
  current: 1,
  size: 10,
  total: 0,
  records: []
})
const noteTypes = [{
  name: '全部',
  value: null
}, {
  name: '章节练习',
  value: 'chapter'
}, {
  name: '试卷',
  value: 'paper'
}, {
  name: '每日一练',
  value: 'everyDayPractice'
}, {
  name: '高频错题',
  value: 'rankError'
}]
const selectedNote = ref(null)
const typeMap = ref({
  "paper": "paperRecordPaperLibrary",
  "chapter": "chapter",
  "everyDayPractice": "everyday",
  "rankError": "rankError"
})

function toggleIndex(index) {
  activeIndex.value = index
//   获取笔记
  getNoteList(types[activeIndex.value], noteType.value, noteListData.value.current, noteListData.value.size)
}


function getNoteList(type, noteType, current, pageSize) {
  if (type === '全部') {
    NoteApis.getMyNote({
      params: {
        // type: 'chapter',
        // relationId:route.query.chapterId,
        categoryId: userStore.selectCategory.categoryId,
        my: false,
        type: noteType, current, pageSize
      }
    }).then(res => {
      noteListData.value = res.data
    })
  } else {
    NoteApis.getMyNote({
      params: {
        categoryId: userStore.selectCategory.categoryId,
        type: noteType, current, pageSize
      }
    }).then(res => {
      noteListData.value = res.data
    })
  }

}

function goToDetail(item, index) {
  selectedNote.value = item

//   发起请求获取详情，回填笔记，显示题目解析等，可修改笔记
  NoteApis.getNoteDetail({
    params: {
      relationId: item.relationId,
      categoryId: item.categoryId,
      relationName: item.type,
    }
  }).then(res => {
    const entries = Object.entries(res.data);
    // 获取relationName

    currentQuestion.value = entries[0][1][0]
    draw.value = true
  })
}

function noteTypeChange(val) {
  getNoteList(types[activeIndex.value], val, noteListData.value.current, noteListData.value.size)
}

function currentChange(val) {
  // getNoteList()
  getNoteList(types[activeIndex.value], noteTypes[noteType.value], noteListData.value.current, noteListData.value.size)
}

function sizeChange(val) {
  getNoteList(types[activeIndex.value], noteTypes[noteType.value], noteListData.value.current, noteListData.value.size)
}

function deleteNote(item, index) {
  NoteApis.deleteNoteOne({
    params: {
      id: item.id
    }
  }).then(res => {
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
    if (index == 0) {
      noteListData.value.current--;
    }
    getNoteList(types[activeIndex.value], noteTypes[noteType.value], noteListData.value.current, noteListData.value.size)
  })
}

function init() {
  getNoteList(types[activeIndex.value])
}

init()

</script>

<template>
  <div class="note-container">
    <div class="content">
      <div class="header">
        <div class="header-left">
          <span class="type-text" v-for="(item,index) in types" :key="index" :class="{active:index===activeIndex}"
                @click="toggleIndex(index)">{{ item }}</span>
        </div>
        <div class="header-right">
          <el-select v-model="noteType" @change="noteTypeChange" class="my-select">
            <el-option v-for="(item,index) in noteTypes" :key="index" :value="item.value" :label="item.name">
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="note-list-container">
        <!--            显示题干 ，笔记内容省略字，试题名字-->
        <div class="note-list-item" v-for="(item,index) in noteListData.records" :key="index">
          <div class="note-list-item-left">
            <div class="note-list-item-left-one">
              <span>头像:</span> <img v-if="item.createHeader" :src="item.createHeader">
              <span>创建人:{{ item.createName }}</span> <span>创建时间:{{ item.createdTime }}</span>
            </div>
            <div class="question-title">
              题干:
              <span v-html="item.stem[0].vl"></span>
            </div>
            <div>笔记内容:{{ item.content }}</div>
          </div>
          <div>
            <el-button @click="goToDetail(item,index)">查看</el-button>
            <el-button @click="deleteNote(item,index)">删除</el-button>
          </div>
        </div>
      </div>

      <el-pagination background layout="prev, pager, next,sizes" :total="noteListData.total"
                     v-model:current-page="noteListData.current" :page-sizes="[10,20,50]"
                     v-model:page-size="noteListData.size" @current-change="currentChange" @size-change="sizeChange"/>

    </div>
    <el-drawer v-model="draw" direction="rtl" size="40%">
      <div>
        <OneQuestion :current-question="currentQuestion" :chapter-id="selectedNote.relationId" column-id=""
                     :records-type="typeMap[selectedNote.type]"/>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped>
.note-container {
  width: 1400px;
  margin: 0 auto;
}

.content {
  background: white;
  border-radius: 12px;
  padding: 20px;
}

.header {
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.type-text {
  cursor: pointer;
}

.type-text.active {
  color: #3C6CFF;
}

.note-list-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
}

.note-list-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e8;
}

.note-list-item-left {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

.note-list-item-left-one {
  display: flex;
  align-items: center;
  gap: 16px;
}

.note-list-item-left-one img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.my-select {
  width: 200px;
}
</style>